{template 'common/header-base-new'}
<link rel="stylesheet" href="./resource/css/wxapp-icon.css">
<body ng-cloak>
	<div class="head">
		<nav class="navbar navbar-default" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand" href="#"><span class="color-default">微</span>擎 <span class="label label-versions">标准版</span></a>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav navbar-left">
						<li class="active">
							<a href="./index.php?c=wxapp&a=wxapp&do=post">小程序</a>
						</li>
						<li>
							<a href="#">公众号</a>
						</li>
						<li>
							<a href="#">应用市场</a>
						</li>
						<li>
							<a href="#">系统管理</a>
						</li>
						<li>
							<a href="#">功能帮助</a>
						</li>
					</ul>

					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="#">提醒</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">皮肤 <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li>
									<a href="#">Action</a>
								</li>
								<li>
									<a href="#">Another action</a>
								</li>
								<li>
									<a href="#">Something else here</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="#">Separated link</a>
								</li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">马德坤 <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li>
									<a href="#">Action</a>
								</li>
								<li>
									<a href="#">Another action</a>
								</li>
								<li>
									<a href="#">Something else here</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="#">Separated link</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
	<div class="main" ng-controller="MainCtrl">
		<div class="container">
			<div class="caret-wxapp">
				<form action="" method="post">
					<input type="hidden" name="wxappval" value="{{submit}}">
				</form>
				<div class="panel panel-app">
					<div class="panel-heading">
						<a href="" class="go-back">
							<</a>新建小程序
					</div>
					<div class="panel-body">
						<ul class="nav nav-wxapp" role="tablist">
							<li ng-class="{'active ban' : createStep == 1, 'finished ready' : createStep > 1}">
								<a href="javascript:void(0);">
									<i class="num">1</i>
									<div class="wxapp-step-name">
										<img src="./resource/images/creat-step-1.png"/>
										<p>选择应用</p>
									</div>
								</a>
							</li>
							<li ng-class="{'active ban' : createStep == 2, 'finished ready' : createStep > 2}">
								<a href="javascript:void(0);">
									<i class="num">2</i>
									<div class="wxapp-step-name">
										<img src="./resource/images/creat-step-2.png"/>
										<p>首页设计</p>
									</div>
								</a>
							</li>
							<li ng-class="{'active ban' : createStep == 3, 'finished ready' : createStep > 3}">
								<a href="javascript:void(0);">
									<i class="num">3</i>
									<div class="wxapp-step-name">
										<img src="./resource/images/creat-step-3.png"/>
										<p>底部导航</p>
									</div>
								</a>
							</li>
							<li ng-class="{'active ban' : createStep == 4, 'finished ready' : createStep > 4}">
								<a href="javascript:void(0);">
									<i class="num">4</i>
									<div class="wxapp-step-name">
										<img src="./resource/images/creat-step-4.png"/>
										<p>打包完成</p>
									</div>
								</a>
							</li>
						</ul>
						<div class="wxapp-content tab-content">
							<div id="select" ng-show="createStep == 1">
								<div class="form-defalut">
									<div class="form-group">
										<label for="" class="control-label">小程序名称</label>
										<div class="form_controls">
											<input type="text" name="name" value="" class="form-control wxapp-name" id="" placeholder="小程序名称">
										</div>
									</div>
									<div class="form-group">
										<label class="control-label">版本号</label>
										<div class="form_controls">
											<input type="number" name="version0" min="0" max="100" value="" class="form-control wxapp-version version0">
										</div>
										<div class="form_controls">
											<p class="form-control-static wxapp-version">.</p>
										</div>
										<div class="form_controls">
											<input type="number" name="version1" min="0" max="100" value="" class="form-control wxapp-version version1">
										</div>
										<div class="form_controls">
											<p class="form-control-static wxapp-version">.</p>
										</div>
										<div class="form_controls">
											<input type="number" name="version2" min="0" max="100" value="" class="form-control wxapp-version version2">
										</div>

									</div>
									<div class="form-group">
										<input type="hidden" name="modules" value="">
										<label class="control-label">添加应用</label>
										<ul class="app-list">
											<div we7-select-more></div>
										</ul>
									</div>
									
								</div>
							</div>
							<div class="wxapp-modules">
								<div id="modules-Modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
									<div class="modal-dialog modal-dialog-default modal-lg">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
												<h3>
													<ul role="tablist" class="nav nav-pills" style="font-size:14px; margin-top:-20px;">
														<li role="presentation" class="basic">
															<a data-toggle="tab" data-type="basic" role="tab" aria-controls="baisc" href="#basic">选择需要打包的应用</a>
														</li>
													</ul>
												</h3>
											</div>
											<div class="modal-body modules-content">
												<div class="tab-content">
													<ul class="app-allow-list">
													</ul>
												</div>
											</div>
											<div class="modal-footer">
											</div>
										</div>
									</div>
								</div>
							</div>
							<div id="home" ng-show="createStep == 2">
								<div class="creat-wxapp-type" ng-show="type == 0">
									<input type="hidden" name="type" value="">
									<div class="type-heading">
										选择设计类型
									</div>
									<ul class="type-list">
										<li class="ban">
											<i class="wi wi-select-diy"></i>
											<p>DIY设计</p>
										</li>
										<li ng-click="selectType(2)">
											<i class="wi wi-select-tem"></i>
											<p>选择模板</p>
										</li>
										<li ng-click="selectType(3)">
											<i class="wi wi-select-app"></i>
											<p>直接跳转应用</p>
										</li>
									</ul>
									<div class="type-footer">
										<i class="fa fa-exclamation-circle"></i>请慎重选择，一旦选择不可更改！
									</div>
								</div>
								<div ng-if="type == 2">
									<div class="wxapp-tem-preview">
										<div class="wxapp-phone">
											<img src="./resource/images/iphone6.png" alt="" class="wxapp-phone-bg" />
											<div class="wxapp-home-preview">
												<img src="./resource/images/wxapp-default-tpl1.jpg" />
											</div>

										</div>
										<div class="panel panel-app tem-detail">
											<div class="panel-heading">
												模板功能
											</div>
											<div class="panel-body">
												<div class="tem-detail-heading">
													本模板包含以下功能
												</div>
												<div class="tem-detail-content">
													<ul>
														<li>更换幻灯片</li>
														<li>更换顶部小图标</li>
														<li>上传推荐图文</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
					
									<div class="creat-select-tem">
										<div class="select-tem-heading">
											选择模板
										</div>
										<div class="select-tem-filter">
											<div class="form-group">
												<select name="" class="select-we7">
													<option value="">全部分类</option>
													<option value="">分类1</option>
													<option value="">分类2</option>
												</select>
											</div>
											<div class="input-group">
												<input type="text" name="" class="form-control" placeholder="输入模板名">
												<span class="input-group-addon"><i class="fa fa-search"></i></span>
											</div>
										</div>
										<div class="select-tem-list">
											<input type="hidden" name="template" value="">
											<ul>
												<li class="select-tem-item" ng-click="selectTpl()">
													<img src="./resource/images/wxapp-default-tpl0.jpg"/>
													<a href="javascript:;" class="cover-dark">
														<i class="fa fa-check cover-selected"></i>
													</a>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="form-group" ng-if="type == 3">
									<input type="hidden" name="tomodule" value="">
									<ul class="app-allow-list">
										<li class="select to-module" ng-click="selectHomeModule(m)" ng-repeat="m in modules">
											<div class="app-info">
												<img ng-src="{{m.icon}}"/>
												<p ng-bind="m.title"></p>
											</div>
											<a href="javascript:;" class="cover-dark">
												<i class="fa fa-check cover-selected"></i>
											</a>
										</li>
									</ul>
								</div>
							</div>
							<div id="bottom" ng-show="createStep == 3">
								<div class="wxapp-tem-preview wxapp-buttom-preview">
									<div class="wxapp-phone">
										<img src="./resource/images/iphone6.png" alt="" class="wxapp-phone-bg" />
										<div class="wxapp-home-preview">
											<div class="buttom-list-preview" ng-style="{'background-color': bottom.bgcolor}">
												<ul ng-style="{'border-top': '1px solid'+bottom.boundary}">
													<li ng-repeat="menu in menus">
														<img ng-src="{{menu.defaultImage}}" class="buttom-preview-img"/>
														<p class="buttom-preview-title" ng-bind="menu.name" ng-style="{'font-size':'12px', 'color': bottom.color}"></p>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="creat-buttom">
									<div class="buttom-heading">
										底部菜单
									</div>
									<div class="creat-buttom-select form-defalut">
										<div class="form-group">
											<label for="" class="control-label">是否显示</label>
											<div class="form_controls">
												<label><input name="" id="" class="form-control" type="checkbox"  style="display: none;">
												<div class="switch" ng-class="{'switchOn': ifShowMenu}" ng-click="showMenu()"></div>
												</label>
											</div>
										</div>
										<div class="form-group buttom-bg-color">
											<label for="" class="control-label">背景颜色</label>
											<div class="form_controls" style="width:100px">
												<div we7-colorpicker we7-my-color="bottom.bgcolor" we7-my-default-color="bottom.bgcolor"></div>
											</div>
										</div>
										<div class="form-group buttom-boundary-color">
											<label for="" class="control-label">交界线颜色</label>
											<div class="form_controls" style="width:100px">
												<div we7-colorpicker we7-my-color="bottom.boundary" we7-my-default-color="bottom.boundary"></div>
											</div>
										</div>
										<div class="form-group buttom-bg-color">
											<label for="" class="control-label">文字默认颜色</label>
											<div class="form_controls" style="width:100px">
												<div we7-colorpicker we7-my-color="bottom.color" we7-my-default-color="bottom.color"></div>
											</div>
										</div>
										<div class="form-group buttom-bg-color">
											<label for="" class="control-label">文字选中颜色</label>
											<div class="form_controls" style="width:100px">
												<div we7-colorpicker we7-my-color="bottom.selectedColor" we7-my-default-color="bottom.selectedColor"></div>
											</div>
										</div>
										<!-- <td>
											<div class="buttom-default-color">
												<div we7-colorpicker we7-my-color="menu.defaultColor" we7-my-default-color="menu.defaultColor"></div>
											</div>
										</td>
										<td>
											<div class="buttom-default-color">
												<div we7-colorpicker we7-my-color="menu.selectedColor" we7-my-default-color="menu.selectedColor"></div>
											</div>
										</td> -->
									</div>
									<div class="buttom-list">
										<table class="table-default buttom-list-table">
											<col width="70" />
											<col width="70" />
											<col width="100" />
											<col width="120" />
											<col width="70" />
											<tr>
												<th>默认</th>
												<th>选中</th>
												<th>菜单名称</th>
												<th>跳转到</th>
												<th>操作</th>
											</tr>
											<tr ng-repeat="menu in menus">
												<td>
													<div class="nav-img-box">
														<img ng-src="{{menu.defaultImage}}" width="100%">
														<div class="cover-dark" style="display:block">
															<div ng-click="addDefaultImg($index)" class="select">选择</div>
														</div>
													</div>
												</td>
												<td>
													<div class="nav-img-box">
														<img ng-src="{{menu.selectedImage}}" width="100%">
														<div class="cover-dark" style="display:block">
															<div ng-click="addSelectedImg($index)" class="select">选择</div>
														</div>
													</div>
												</td>
												<td>
													<input type="text" name="menuname" ng-model="menu.name" class="form-control" />
												</td>
												
												<td>
													<select class="form-control" id="lineheight" ng-model="menu.module" ng-options="module.title for module in modules">
													</select>
												</td>
												<td>
													<a href="javascript:;" class="buttom-del" ng-click="delMenu($index)"><i class="fa fa-times-circle"></i></a>
												</td>
											</tr>
											<tr class="buttom-more">
												<td colspan="7"><a href="javascript:;" class="buttom-add" ng-click="addMenu()">+</a></td>
											</tr>
										</table>
									</div>
								</div>
							</div>
							<div id="finish" ng-show="createStep == 4">
								<div class="form-defalut wxapp-finish">
									<div class="form-group">
										<label for="" class="control-label">小程序名称</label>
										<div class="form_controls">
											<p class="form-control-static" ng-bind="submit.name"></p>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label">版本号</label>
										<div class="form_controls">
											<p class="form-control-static">V {{submit.version0}}.{{submit.version1}}.{{submit.version2}}</p>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label">打包应用</label>
										<ul class="app-list">
											<li class="select" ng-repeat="m in submit.modules">
												<div class="app-info">
													<img ng-src="{{m.icon}}" />
													<p>{{m.title}}</p>
												</div>
											</li>
										</ul>
									</div>
									<div class="form-group" ng-if="type == 2">
										<label class="control-label">首页模板</label>
										<div class="form_controls">
											<p class="form-control-static" ng-bind="submit.template"></p>
										</div>
									</div>
									<div class="form-group" ng-if="type == 3">
										<label class="control-label">首页跳转应用</label>
										<div class="form_controls">
											<p class="form-control-static" ng-bind="submit.tomodule.title"></p>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label">底部菜单</label>
										<div class="form_controls">	
											<table class="table-finish-buttom">
												<col width="75px"/>
												<col width="105"/>
												<col />
												<tr>
													<td>菜单图标</td>
													<td>菜单名字</td>
													<td>菜单链接模块</td>
												</tr>
												<tr ng-repeat="menu in submit.menus">
													<td>
														<img ng-src="{{menu.defaultImage}}" alt="" width="48px" height="48px"/>
													</td>
													<td ng-bind="menu.name"></td>
													<td ng-bind="menu.module.title"></td>
												</tr>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<nav class="navbar navbar-wxapp-bottom navbar-fixed-bottom" role="navigation">
			<div class="container">
				<div class="pager">
					<a type="button" class="btn btn-primary" ng-show="createStep != 1" ng-click="prevStep()">上一步</a>
					<a type="button" class="btn btn-primary" ng-show="createStep != 4" ng-click="nextStep()">下一步</a>
					<a type="button" class="btn btn-danger" ng-show="createStep == 4" ng-click="package()">生成版本打包下载</a>
					<!-- <a type="button" class="btn btn-default" ng-show="createStep == 4">首页预览</a> -->
				</div>
			</div>
		</nav>
	</div>
</body>
<script>

require(['fileUploader', 'bootstrap', 'angular', 'underscore'], function(uploader){

	//转移部分-start
	angular.module('wxApp', ['app']);
	angular.module('wxApp').directive('we7SelectMore', ['$http', function($http){
		return {
			restrict: 'EA',
			template: '<li class="select select-more" ng-click="selectMore()"></li>',
			replace: true,
			link: function($scope) {
				$scope.selectMore = function() {
					$('#modules-Modal').modal('show');

					if(_.isEmpty($scope.apps)) {
						var content = $('.modules-content .tab-content .app-allow-list');
						content.html('<div class="info text-center"><i class="fa fa-spinner fa-pulse fa-lg"></i> 数据加载中</div>');
						var url = './index.php?c=wxapp&a=create&do=getapps';
						$http({method: 'POST', url: url, cache: true}).
							success(function(data, status) {
								$scope.apps = data.message;
								var dataHtml = '';
								angular.forEach($scope.apps, function(val, key){
									dataHtml += '<li>'+
										'	<div class="app-info">'+
										'		<img src="'+val.module_icon+'" />'+
										'		<p>'+val.module_title+'</p>'+
										'	</div>'+
										'	<a href="javascript:;" onclick="selectModule(\''+val.module+'\', \''+val.module_title+'\', \''+val.module_icon+'\', \''+val.url_show+'\', \''+val.version+'\')" class="cover-dark">'+
										'		<i class="fa fa-check cover-selected"></i>'+
										'	</a>'+
										'</li>';
								});
								content.html(dataHtml);
							}).
							error(function(data, status) {
								content.html('<div class="info text-center">数据加载失败，点此<button class="btn btn-link"  ng-click="selectMore()">重新加载</button></div>');
							});

					}else {
						var dataHtml = '';
						var content = $('.modules-content .tab-content .app-allow-list');
						angular.forEach($scope.apps, function(val, key){
							dataHtml += '<li>'+
										'	<div class="app-info">'+
										'		<img src="'+val.module_icon+'" />'+
										'		<p>'+val.module_title+'</p>'+
										'	</div>'+
										'	<a href="javascript:;" onclick="selectModule(\''+val.module+'\', \''+val.module_title+'\', \''+val.module_icon+'\', \''+val.url_show+'\', \''+val.version+'\')" class="cover-dark">'+
										'		<i class="fa fa-check cover-selected"></i>'+
										'	</a>'+
										'</li>';
						});
						content.html(dataHtml);
					}
				};
			}
		}
	}]);
	angular.module('wxApp').controller('MainCtrl', ['$scope', 'config', function($scope, config){
		//小程序添加的应用集合
		$scope.apps = [];
		//已选应用
		$scope.modules = [];
		//小程序首页类型
		$scope.type = 0;
		//创建小程序到第几步
		$scope.createStep = 1;
		//底部菜单背景颜色、分界线颜色
		$scope.bottom = {
			bgcolor: '#bebebe',
			boundary: '#fff',
			selectedColor: '#0f0',
			color: '#428bca',
		};
		//底部菜单
		$scope.menus = [];
		$scope.ifShowMenu = true;
		$scope.submit = {};
		$scope.prevStep = function() {
			if($scope.createStep <= 1) {
				$scope.createStep = 1;
			}else {
				$scope.createStep -= 1;
			}
		};
		$scope.nextStep = function(){
			if($scope.createStep > 4) {
				$scope.createStep = 4;
			}else {
				var checked = $scope.checkComplete();
				// var checked = true;
				if(checked) {
					$scope.createStep += 1;
				}
			}
		};
		$scope.selectType = function(type) {
			$scope.type = parseInt(type);
			$(':hidden[name="type"]').val(type);
		};
		$scope.selectTpl = function() {
			$(event.target).parents('.select-tem-item').addClass('active');
			$(':hidden[name="template"]').val('default');
		};
		$scope.selectHomeModule = function(m) {
			$(event.target).parents('.to-module').addClass('active').siblings().removeClass('active');
			$(':hidden[name="tomodule"]').val(m);
			$scope.tomodule = m;
		};
		$scope.showMenu = function() {
			$scope.ifShowMenu = !$scope.ifShowMenu;
		};
		$scope.addMenu = function() {
			if($scope.menus.length >= 5) {
				return false;
			}
			$scope.menus.push({
				name: '首页',
				defaultImage: './resource/images/bottom-default.png',
				selectedImage: './resource/images/bottom-default.png',
				module: {}
			});
		};
		$scope.delMenu = function(index) {
			$scope.menus = _.without($scope.menus, $scope.menus[index]);
		};
		$scope.addDefaultImg = function(index) {
			uploader.show(function(img) {
				$scope.menus[index].defaultImage = img.url;
				$scope.$apply();
			}, {'direct' : true, 'multiple' : false});
		};
		$scope.addSelectedImg = function(index) {
			uploader.show(function(img) {
				$scope.menus[index].selectedImage = img.url;
				$scope.$apply();
			}, {'direct' : true, 'multiple' : false});
		}
		//点击下一步：检测是否可以进入下一步
		$scope.checkComplete = function() {
			var step = $scope.createStep;
			switch(step) {
				case 1:
					var name = $(':text[name="name"]').val().trim();
					var version0 = $('.version0').val();
					var version1 = $('.version1').val();
					var version2 = $('.version2').val();
					var modules = $(':hidden[name="modules"]').val().trim();
					if(!angular.isString(name) || _.isEmpty(name)) {
						util.message('小程序名称不可为空！');
						return false;
					}
					if(_.isEmpty(version0)) {
						util.message('版本号第一位有误，需不为空且为数字');
						return false;
					}
					if(_.isEmpty(version1)) {
						util.message('版本号第二位有误，需不为空且为数字');
						return false;
					}
					if(_.isEmpty(version2)) {
						util.message('版本号第三位有误，需不为空且为数字');
						return false;
					}
					if(_.isEmpty(modules)) {
						util.message('请添加并选择至少一个应用！');
						return false;
					}
					$scope.modules = modulesVal;
					return true;
					break;
				case 2:
					//判断首页类型
					var selectType = parseInt($(':hidden[name="type"]').val());
					if(selectType != 2 && selectType != 3) {
						util.message('请先选择首页设计类型！');
						return false;
					}
					//判断DIY

					//判断模板
					if(selectType == 2) {
						var selectTpl = $(':hidden[name="template"]').val();
						if(_.isEmpty(selectTpl)) {
							util.message('请选择一个模板！');
							return false;
						}	
					}
					
					//判断跳转应用
					if(selectType == 3) {
						var selectTpl = $(':hidden[name="tomodule"]').val();
						if(_.isEmpty(selectTpl)) {
							util.message('请选择一个应用！');
							return false;
						}						
					}
					return true;
					break;
				case 3:
					$scope.submit = {
						name: $(':text[name="name"]').val(),
						version0: $('.version0').val(),
						version1: $('.version1').val(),
						version2: $('.version2').val(),
						modules: modulesVal,
						type: $scope.type,
						template: $(':hidden[name="template"]').val(),
						tomodule: $scope.tomodule,
						showmenu: $scope.ifShowMenu,
						buttom: $scope.bottom,
						menus: $scope.menus,
					};
					if($scope.menus.length < 2) {
						util.message('请至少设置两个底部菜单！');
						return false;
					}
					return true;
					break;
				case 4:
					return true;
					break;
				default:
					return false;
			}
		};

		$scope.package = function(){
			$(':hidden[name="wxappval"]').parents('form').submit();
		};
	}]);
	//转移部分-end

	angular.module('wxApp').value('config', {
	});
	angular.bootstrap(document, ['wxApp']);
});
var modulesVal = [];
var selectModule = function(module, title, icon, showurl, version){
	var html = '<li class="select">'+
			'		<div class="app-info">'+
			'			<img src="'+icon+'" />'+
			'			<p>'+title+'</p>'+
			'		</div>'+
			'		<div class="cover-dark">'+
			'			<a href="javascript:;" class="cover-delect" onclick="delModule(\''+module+'\', this);"><i class="fa fa-minus-circle"></i>删除</a>'+
			'		</div>'+
			'	</li>';
	$('#select .app-list').prepend(html);

	modulesVal.push({
		title: title,
		module: module,
		icon: icon,
		url: showurl,
		version: version
	});
	$(':hidden[name="modules"]').val(modulesVal);				
	$('#modules-Modal').modal('hide');
};
var delModule = function(module, t) {
	if(!_.isEmpty(modulesVal)) {
		angular.forEach(modulesVal, function(val, key){
			if(val.module == module) {
				modulesVal = _.without(modulesVal, modulesVal[key]);
			}
		});
		$(':hidden[name="modules"]').val(modulesVal);
		$(t).parent().parent().remove();
	}
};
</script>
</html>